<template>
    <div class="recordBox">
        <van-nav-bar title="停车记录" left-text="返回" left-arrow @click-left="onClickLeft" />

        <div class="query">
            <h3>时间段查询</h3>
            <van-form @submit="onSubmit">
                <van-field v-model="entryTime" name="entryTime" label="入场时间" placeholder=" 请输入入场时间 "
                    @click="entryPop" />
                <van-field v-model="outTime" name="outTime" label="出场时间" placeholder="请输入出场时间" @click="outPop" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">查询</van-button>
                </div>
            </van-form>
        </div>
        <div class="recordList">
            <div class="empty" v-show="recordList.length==0?true:false">
                <van-empty description="暂无记录" />
            </div>
            <div class="listOne" v-for="item in recordList" :key="item.id">
                <div class="parkName">{{item.parkName}}</div>
                <div class="address">{{item.address}}</div>
                <div class="plateNumber">
                    <span>车牌号: <i>{{item.plateNumber}}</i> </span>
                    <span class="parkNo">车位: <i>{{item.parkNo}}</i> </span>
                </div>
                <div class="monetary">消费金额: {{item.monetary}}元</div>
                <div class="entryTime">入场时间: {{item.entryTime}}</div>
                <div class="outTime">出场时间: {{item.outTime}}</div>
            </div>
        </div>
        <van-popup v-model="entryShow" position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker v-model="currentDate" type="datetime" title="选择完整时间" :min-date="minDate"
                :max-date="maxDate" @confirm="getEntryVal" @cancel="canEntry" />
        </van-popup>
        <van-popup v-model="outShow" position="bottom" :style="{ height: '40%' }">
            <van-datetime-picker v-model="currentDate" type="datetime" title="选择完整时间" :min-date="minDate"
                :max-date="maxDate" @confirm="getOutVal" @cancel="canOut" />
        </van-popup>
    </div>
</template>
<script>
import nav from "@/mixin/nav"
import { stopRecord } from "@/service/stop/stopService";
export default {
    mixins: [nav],
    data() {
        return {
            entryTime: "",
            outShow: false,
            outTime: "",
            recordList: [],
            entryShow: false,
            minDate: new Date(2020, 0, 1),
            maxDate: new Date(2025, 10, 1),
            currentDate: new Date(),
        }
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async onSubmit(val) {
            console.log(val);
            let { data } = await stopRecord(val)
            console.log(data);
            if (data.code == 200) {
                this.recordList = data.rows;
            }
        },
        entryPop() {
            this.entryShow = true;
        },
        outPop() {
            // this.show = true;
            this.outShow = true;
        },
        getEntryVal(val) {
            console.log(val);
            this.entryTime = this.dateFormat(val, "'YYYY-MM-DD HH:mm:ss'");
            this.entryShow = false;
        },
        canEntry() {
            this.entryShow = false;
        },
        getOutVal(val) {
            console.log(val);
            this.outTime = this.dateFormat(val, "'YYYY-MM-DD HH:mm:ss'");
            this.outShow = false;
        },
        canOut() {
            this.outShow = false;
        },
        dateFormat(time, format) {
            // 获取年月日时分秒
            let y = time.getFullYear()
            let m = (time.getMonth() + 1).toString().padStart(2, '0')
            let d = time.getDate().toString().padStart(2, '0')
            let h = time.getHours().toString().padStart(2, '0')
            let min = time.getMinutes().toString().padStart(2, '0')
            let s = time.getSeconds().toString().padStart(2, '0')
            if (format === 'YYYY-MM-DD') {
                return `${y}-${m}-${d}`
            } else {
                return `${y}-${m}-${d} ${h}:${min}:${s}`
            }
        }
    },
    async created() {
        let { data } = await stopRecord();
        console.log(data);
        this.recordList = data.rows;
    }
}
</script>
<style scoped lang="scss">
body {
    height: 100%;
}

.recordBox {
    background-color: #EDEDED;
}

.recordList {
    background-color: #fff;
    padding: 10px;

    .listOne {
        padding: 10px;
        border-bottom: 1px solid #EDEDED;
        line-height: 30px;

        .parkName {
            font-weight: 600;
            font-size: 18px;
        }

        .plateNumber {
            span {
                margin-right: 10px;

                i {
                    font-size: 15px;
                    color: red;
                }
            }
        }
    }
}

.query {
    margin: 30px 10px;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;

    h3 {
        margin-bottom: 30px;
    }
}
</style>